<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Meta -->
    <meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
    <meta name="author" content="ruyangit@163.com">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../assets/img/favicon.png">

    <title>Tangdao Responsive Bootstrap 4 Dashboard Template</title>

    <!-- vendor css -->
    <link href="../lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/prismjs/themes/prism-vs.css" rel="stylesheet">

    <!-- Tangdao CSS -->
    <link rel="stylesheet" href="../assets/css/tangdao.css">
    <link rel="stylesheet" href="../assets/css/tangdao.component.css">
    <link rel="stylesheet" href="../assets/css/tangdao.demo.css">
    <link rel="stylesheet" href="../assets/css/skin.gradient.css">

  </head>
  <body class="app-component">
    <header class="navbar navbar-header navbar-header-fixed">
      <a href="" id="mainMenuOpen" class="burger-menu"><i data-feather="menu"></i></a>
      <a href="" id="componentContentHide" class="burger-menu d-none"><i data-feather="arrow-left"></i></a>
      <div class="navbar-brand">
        <a href="../index.html" class="df-logo">Tangdao<span class="mg-l-5">Design</span></a>
      </div><!-- navbar-brand -->
      <div id="navbarMenu" class="navbar-menu-wrapper">
        <div class="navbar-menu-header">
          <a href="../index.html" class="df-logo">Tangdao<span class="mg-l-5">Design</span></a>
          <a id="mainMenuClose" href=""><i data-feather="x"></i></a>
        </div><!-- navbar-menu-header -->
        <ul class="nav navbar-menu">
          <li class="nav-label pd-l-20 pd-lg-l-25 d-lg-none">Main Navigation</li>
          <li class="nav-item"><a href="../docs.html" class="nav-link"><i data-feather="book-open"></i> 文档</a></li>
          <li class="nav-item active"><a href="../components/index.html" class="nav-link"><i data-feather="box"></i> 组件</a></li>
          <li class="nav-item"><a href="../collections/index.html" class="nav-link"><i data-feather="package"></i> 资源</a></li>
          <li class="nav-item"><a href="../template/index.html" class="nav-link"><i data-feather="layers"></i> 模板</a></li>
        </ul>
      </div><!-- navbar-menu-wrapper -->
      <div class="navbar-right">
        <a href="javascript:;" class="search-link" id="navbarSearch"><i data-feather="search"></i></a>
        <div class="dropdown dropdown-notification mg-l-15-f">
          <a href="javascript:;" class="dropdown-link new-indicator" data-toggle="dropdown">
            <i data-feather="bell"></i>
            <span>2</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-header">通知</div>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.2</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.1</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.0</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <div class="dropdown-footer"><a href="">View all Notifications</a></div>
          </div><!-- dropdown-menu -->
        </div><!-- dropdown -->

        <a href="https://gitee.com/ruyangit/tangdao-design" class="mg-l-20"><div class="pd-8 tx-white tx-white-8" ><i data-feather="github" class="wd-20 ht-20"></i></div></a>
      </div><!-- navbar-right -->

      <div class="navbar-search">
        <div class="navbar-search-header">
          <input type="search" class="form-control" placeholder="Type and hit enter to search...">
          <button class="btn"><i data-feather="search"></i></button>
          <a id="navbarSearchClose" href="" class="link-03 mg-l-5 mg-lg-l-10"><i data-feather="x"></i></a>
        </div><!-- navbar-search-header -->
        <div class="navbar-search-body">
          <label class="tx-10 tx-medium tx-uppercase tx-spacing-1 tx-color-03 mg-b-10 d-flex align-items-center">Recent Searches</label>
          <ul class="list-unstyled">
            <li><a href="index.html">modern dashboard</a></li>
            <li><a href="../components/modal.html">modal examples</a></li>
            <li><a href="../components/el-avatar.html">avatar</a></li>
          </ul>
        </div><!-- navbar-search-body -->
      </div><!-- navbar-search -->

    </header><!-- navbar -->

    <div class="component-wrapper">
      <div class="component-navleft">
        <nav class="nav flex-column">
          <a href="#tab-layout" class="nav-link " data-toggle="tab">
            <span data-toggle="tooltip" title="Browse Components" data-placement="right"><i data-feather="layout"></i></span>
          </a>
          <a href="#tab-grid" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Grid System" data-placement="right"><i data-feather="grid"></i></span>
          </a>
          <a href="#tab-util" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Utilities" data-placement="right"><i data-feather="package"></i></span>
          </a>
          <a href="#tab-element" class="nav-link " data-toggle="tab">
            <span data-toggle="tooltip" title="UI Elements" data-placement="right"><i data-feather="layers"></i></span>
          </a>
          <a href="#tab-form" class="nav-link active" data-toggle="tab">
            <span data-toggle="tooltip" title="Forms" data-placement="right"><i data-feather="inbox"></i></span>
          </a>
          <a href="#tab-chart" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Charts" data-placement="right"><i data-feather="pie-chart"></i></span>
          </a>
        </nav>
      </div><!-- component-navleft -->

      <div class="component-sidebar">
        <div class="component-sidebar-header">
          <i data-feather="search"></i>
          <div class="search-form">
            <input type="search" class="form-control" placeholder="Search components">
          </div>
        </div><!-- component-sidebar-header -->
        <div class="component-sidebar-body">
          <div class="tab-content">
            <div id="tab-layout" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media ">
                  <a class="media-body mg-l-10" href="index.html">
                    <h6 class="tx-13 mg-b-3">Introduction</h6>
                    <span class="tx-12">介绍</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="../collections/modals.html">
                    <h6 class="tx-13 mg-b-3">Modals</h6>
                    <span class="tx-12">窗口示例</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-grid" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="grid.html">
                    <h6 class="tx-13 mg-b-3">Grid System</h6>
                    <span class="tx-12">布局、栅格、后台布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-util" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="util-animation.html">
                    <h6 class="tx-13 mg-b-3">Animation</h6>
                    <span class="tx-12">动画库</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-background.html">
                    <h6 class="tx-13 mg-b-3">Background</h6>
                    <span class="tx-12">背景、颜色</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-border.html">
                    <h6 class="tx-13 mg-b-3">Border</h6>
                    <span class="tx-12">边线</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-display.html">
                    <h6 class="tx-13 mg-b-3">Display</h6>
                    <span class="tx-12">展示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-divider.html">
                    <h6 class="tx-13 mg-b-3">Divider</h6>
                    <span class="tx-12">分割</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-flex.html">
                    <h6 class="tx-13 mg-b-3">Flex</h6>
                    <span class="tx-12">布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-height.html">
                    <h6 class="tx-13 mg-b-3">Height</h6>
                    <span class="tx-12">高度</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-margin.html">
                    <h6 class="tx-13 mg-b-3">Margin</h6>
                    <span class="tx-12">外边距</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-padding.html">
                    <h6 class="tx-13 mg-b-3">Padding</h6>
                    <span class="tx-12">内边距</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-position.html">
                    <h6 class="tx-13 mg-b-3">Position</h6>
                    <span class="tx-12">位置</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-typography.html">
                    <h6 class="tx-13 mg-b-3">Typography</h6>
                    <span class="tx-12">排版</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-width.html">
                    <h6 class="tx-13 mg-b-3">Width</h6>
                    <span class="tx-12">宽度</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-extras.html">
                    <h6 class="tx-13 mg-b-3">Extras</h6>
                    <span class="tx-12">扩展</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-element" class="tab-pane fade ">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="el-accordion.html">
                    <h6 class="tx-13 mg-b-3">Accordion</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-alerts.html">
                    <h6 class="tx-13 mg-b-3">Alerts</h6>
                    <span class="tx-12">警告提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-avatar.html">
                    <h6 class="tx-13 mg-b-3">Avatar</h6>
                    <span class="tx-12">头像</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-badge.html">
                    <h6 class="tx-13 mg-b-3">Badge</h6>
                    <span class="tx-12">徽标数</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-breadcrumbs.html">
                    <h6 class="tx-13 mg-b-3">Breadcrumbs</h6>
                    <span class="tx-12">面包屑</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-buttons.html">
                    <h6 class="tx-13 mg-b-3">Buttons</h6>
                    <span class="tx-12">按钮</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-button-groups.html">
                    <h6 class="tx-13 mg-b-3">Button Groups</h6>
                    <span class="tx-12">按钮组</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-cards.html">
                    <h6 class="tx-13 mg-b-3">Cards</h6>
                    <span class="tx-12">卡片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-carousel.html">
                    <h6 class="tx-13 mg-b-3">Carousel</h6>
                    <span class="tx-12">走马灯</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-collapse.html">
                    <h6 class="tx-13 mg-b-3">Collapse</h6>
                    <span class="tx-12">折叠面板</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-dropdown.html">
                    <h6 class="tx-13 mg-b-3">Dropdown</h6>
                    <span class="tx-12">下拉菜单</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-icons.html">
                    <h6 class="tx-13 mg-b-3">Icons</h6>
                    <span class="tx-12">图表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-images.html">
                    <h6 class="tx-13 mg-b-3">Images</h6>
                    <span class="tx-12">图片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-list-group.html">
                    <h6 class="tx-13 mg-b-3">List Group</h6>
                    <span class="tx-12">列表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-marker.html">
                    <h6 class="tx-13 mg-b-3">Marker</h6>
                    <span class="tx-12">标记</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-media-object.html">
                    <h6 class="tx-13 mg-b-3">Media Object</h6>
                    <span class="tx-12">多媒体</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-modal.html">
                    <h6 class="tx-13 mg-b-3">Modal</h6>
                    <span class="tx-12">对话框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-navs.html">
                    <h6 class="tx-13 mg-b-3">Navs</h6>
                    <span class="tx-12">导航</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-navbar.html">
                    <h6 class="tx-13 mg-b-3">Navbar</h6>
                    <span class="tx-12">导航条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-off-canvas.html">
                    <h6 class="tx-13 mg-b-3">Off-Canvas</h6>
                    <span class="tx-12">抽屉，画布闭合</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-pagination.html">
                    <h6 class="tx-13 mg-b-3">Pagination</h6>
                    <span class="tx-12">分页</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-placeholder.html">
                    <h6 class="tx-13 mg-b-3">Placeholder</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-popovers.html">
                    <h6 class="tx-13 mg-b-3">Popovers</h6>
                    <span class="tx-12">起爆卡片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-progress.html">
                    <h6 class="tx-13 mg-b-3">Progress</h6>
                    <span class="tx-12">进度条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-steps.html">
                    <h6 class="tx-13 mg-b-3">Steps</h6>
                    <span class="tx-12">步骤</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-scrollbar.html">
                    <h6 class="tx-13 mg-b-3">Scrollbar</h6>
                    <span class="tx-12">滚动条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-scrollspy.html">
                    <h6 class="tx-13 mg-b-3">Scrollspy</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-spinners.html">
                    <h6 class="tx-13 mg-b-3">Spinners</h6>
                    <span class="tx-12">加载</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-tab.html">
                    <h6 class="tx-13 mg-b-3">Tab</h6>
                    <span class="tx-12">标签页</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-toast.html">
                    <h6 class="tx-13 mg-b-3">Toast</h6>
                    <span class="tx-12">提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-tooltips.html">
                    <h6 class="tx-13 mg-b-3">Tooltips</h6>
                    <span class="tx-12">文字提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-table-basic.html">
                    <h6 class="tx-13 mg-b-3">Table Basic</h6>
                    <span class="tx-12">基础表格</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-table-advanced.html">
                    <h6 class="tx-13 mg-b-3">Table Advanced</h6>
                    <span class="tx-12">高级表格</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-form" class="tab-pane fade  active show">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media ">
                  <a class="media-body mg-l-10" href="form-elements.html">
                    <h6 class="tx-13 mg-b-3">Form Elements</h6>
                    <span class="tx-12">表单元素</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="form-input-group.html">
                    <h6 class="tx-13 mg-b-3">Input Group</h6>
                    <span class="tx-12">输入组</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-tags.html">
                    <h6 class="tx-13 mg-b-3">Input Tags</h6>
                    <span class="tx-12">标签</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="form-input-masks.html">
                    <h6 class="tx-13 mg-b-3">Input Masks</h6>
                    <span class="tx-12">标记</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="form-layouts.html">
                    <h6 class="tx-13 mg-b-3">Form Layouts</h6>
                    <span class="tx-12">表单布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-validation.html">
                    <h6 class="tx-13 mg-b-3">Form Validation</h6>
                    <span class="tx-12">表单验证</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-wizard.html">
                    <h6 class="tx-13 mg-b-3">Form Wizard</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-text-editor.html">
                    <h6 class="tx-13 mg-b-3">Text Editor</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-range-slider.html">
                    <h6 class="tx-13 mg-b-3">Range Slider</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-date-pickers.html">
                    <h6 class="tx-13 mg-b-3">Date Pickers</h6>
                    <span class="tx-12">日期</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-select2.html">
                    <h6 class="tx-13 mg-b-3">Select2</h6>
                    <span class="tx-12">选择框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media active">
                  <a class="media-body mg-l-10" href="form-search.html">
                    <h6 class="tx-13 mg-b-3">Search</h6>
                    <span class="tx-12">搜索框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-chart" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-flot.html">
                    <h6 class="tx-13 mg-b-3">Flot</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-js.html">
                    <h6 class="tx-13 mg-b-3">ChartJS</h6>
                    <span class="tx-12">图表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-peity.html">
                    <h6 class="tx-13 mg-b-3">Peity</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-sparkline.html">
                    <h6 class="tx-13 mg-b-3">Sparkline</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-morris.html">
                    <h6 class="tx-13 mg-b-3">Morris</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
          </div><!-- tab-content -->
        </div><!-- component-sidebar-body -->
      </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Forms</a></li>
              <li class="breadcrumb-item active" aria-current="page">Search</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="df-title">Search</h1>
        <p class="df-lead">Search lets users specify a word or phrase to search for relevant pieces of information. Search can be used as a filter or a primary means of searching some content.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">The basic style for search component that can be submitted by hitting enter kay or by clicking the search icon on the right side of the bar.</p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="wd-lg-40p">
            <div class="search-form">
              <input type="search" class="form-control" placeholder="Search">
              <button class="btn" type="button"><i data-feather="search"></i></button>
            </div><!-- search-form -->
          </div>
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;div class=&quot;search-form&quot;&gt;
  &lt;input type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search&quot;&gt;
  &lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i data-feather=&quot;search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Expanding Search Bar</h4>
        <p class="mg-b-30">A search input that can be expanded when clicking the search icon and automaticall minimize when focusing outside of the input box.</p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="wd-lg-40p d-flex justify-content-end">
            <form id="searchExpanding" class="search-form search-form-expanding">
              <input type="search" class="form-control" placeholder="Search">
              <button class="btn" type="button"><i data-feather="search"></i></button>
            </form><!-- search-form -->
          </div>
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;form id=&quot;searchExpanding&quot; class=&quot;search-form search-form-expanding&quot;&gt;
  &lt;input type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search&quot;&gt;
  &lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i data-feather=&quot;search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/form&gt;</code></pre>
        <pre><code class="language-js">$(&apos;#searchExpanding button&apos;).on(&apos;click&apos;, function(e){
  e.preventDefault()

  if($(this).prev().val() === &apos;&apos;) {
    $(this).parent().toggleClass(&apos;expand&apos;);
  } else {
    $(this).parent().submit();
  }
})

// Collapse expanding search
$(&apos;#searchExpanding .form-control&apos;).on(&apos;focusout&apos;, function(e){
  if($(this).val() === &apos;&apos;) {
    $(this).parent().removeClass(&apos;expand&apos;);
  }
})</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">With Typeahead</h4>
        <p class="mg-b-30">When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query. Read the <a href="https://twitter.github.io/typeahead.js/examples" target="_blank">Official Typeahead Documentation</a> for a full list of instructions and other options.</p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="theBasics" type="search" class="form-control" placeholder="Search States of USA">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-html">&lt;div class=&quot;search-form&quot;&gt;
  &lt;input id=&quot;theBasics&quot; type=&quot;search&quot; class=&quot;form-control&quot; placeholder=&quot;Search States of USA&quot;&gt;
&lt;/div&gt;</code></pre>
          <pre><code class="language-js">var substringMatcher = function(strs) {
return function findMatches(q, cb) {
  var matches, substrRegex;

  // an array that will be populated with substring matches
  matches = [];

  // regex used to determine if a string contains the substring `q`
  substrRegex = new RegExp(q, &apos;i&apos;);

  // iterate through the pool of strings and for any string that
  // contains the substring `q`, add it to the `matches` array
  $.each(strs, function(i, str) {
    if (substrRegex.test(str)) {
      matches.push(str);
    }
  });

  cb(matches);
};
};

var states = [&apos;Alabama&apos;, &apos;Alaska&apos;, &apos;Arizona&apos;, &apos;Arkansas&apos;, &apos;California&apos;,
&apos;Colorado&apos;, &apos;Connecticut&apos;, &apos;Delaware&apos;, &apos;Florida&apos;, &apos;Georgia&apos;, &apos;Hawaii&apos;,
&apos;Idaho&apos;, &apos;Illinois&apos;, &apos;Indiana&apos;, &apos;Iowa&apos;, &apos;Kansas&apos;, &apos;Kentucky&apos;, &apos;Louisiana&apos;,
&apos;Maine&apos;, &apos;Maryland&apos;, &apos;Massachusetts&apos;, &apos;Michigan&apos;, &apos;Minnesota&apos;,
&apos;Mississippi&apos;, &apos;Missouri&apos;, &apos;Montana&apos;, &apos;Nebraska&apos;, &apos;Nevada&apos;, &apos;New Hampshire&apos;,
&apos;New Jersey&apos;, &apos;New Mexico&apos;, &apos;New York&apos;, &apos;North Carolina&apos;, &apos;North Dakota&apos;,
&apos;Ohio&apos;, &apos;Oklahoma&apos;, &apos;Oregon&apos;, &apos;Pennsylvania&apos;, &apos;Rhode Island&apos;,
&apos;South Carolina&apos;, &apos;South Dakota&apos;, &apos;Tennessee&apos;, &apos;Texas&apos;, &apos;Utah&apos;, &apos;Vermont&apos;,
&apos;Virginia&apos;, &apos;Washington&apos;, &apos;West Virginia&apos;, &apos;Wisconsin&apos;, &apos;Wyoming&apos;
];

$(&apos;#theBasics&apos;).typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: &apos;states&apos;,
source: substringMatcher(states)
});</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Bloodhound</h4>
        <p class="mg-b-30">For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine. </p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="bloodhound" type="search" class="form-control" placeholder="Search States of USA">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-js">var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in &quot;The Basics&quot;
  local: states
});

$(&apos;#bloodhound&apos;).typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: &apos;states&apos;,
  source: states
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Prefetch</h4>
        <p class="mg-b-30">Prefetched data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads. </p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="prefetch" type="search" class="form-control" placeholder="Search Countries">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-js">var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // url points to a json file that contains an array of country names, see
  prefetch: &apos;../data/countries.json&apos;
});

// passing in null for the options arguments will result in the default
// options being used
$(&apos;#prefetch&apos;).typeahead(null, {
  name: &apos;countries&apos;,
  source: countries
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Remote</h4>
        <p class="mg-b-30">Remote data is only used when the data provided by local and prefetch is insufficient. In order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited. </p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="remote" type="search" class="form-control" placeholder="Oscar winners for Best Picture">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-js">var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(&apos;value&apos;),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: &apos;../data/films/post_1960.json&apos;,
  remote: {
    url: &apos;../data/films/queries/%QUERY.json&apos;,
    wildcard: &apos;%QUERY&apos;
  }
});

$(&apos;#remote&apos;).typeahead(null, {
  name: &apos;best-pictures&apos;,
  display: &apos;value&apos;,
  source: bestPictures
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section7" class="mg-b-10">Custom Template</h4>
        <p class="mg-b-30">Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. </p>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="custom" type="search" class="form-control" placeholder="Oscar winners for Best Picture">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-js">$(&apos;#custom &apos;).typeahead(null, {
  name: &apos;best-pictures&apos;,
  display: &apos;value&apos;,
  source: bestPictures,
  templates: {
    empty: [
      &apos;&lt;div class=&quot;empty-message&quot;&gt;&apos;,
        &apos;Unable to find any best picture winners that match the current query&apos;,
      &apos;&lt;/div&gt;&apos;
    ].join(&apos;\n&apos;),
    suggestion: Handlebars.compile(&apos;&lt;div&gt;&lt;strong&gt;{{value}}&lt;/strong&gt; – {{year}}&lt;/div&gt;&apos;)
  }
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h5 id="section8" class="tx-inverse mg-b-35">Multiple Datasets</h5>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form wd-lg-50p">
            <input id="datasets" type="search" class="form-control" placeholder="NBA and NHL teams">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-js">var nbaTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(&apos;team&apos;),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: &apos;../data/nba.json&apos;
});

var nhlTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(&apos;team&apos;),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: &apos;../data/nhl.json&apos;
});

$(&apos;#datasets&apos;).typeahead({
  highlight: true
},
{
  name: &apos;nba-teams&apos;,
  display: &apos;team&apos;,
  source: nbaTeams,
  templates: {
    header: &apos;&lt;h3 class=&quot;league-name&quot;&gt;NBA Teams&lt;/h3&gt;&apos;
  }
},
{
  name: &apos;nhl-teams&apos;,
  display: &apos;team&apos;,
  source: nhlTeams,
  templates: {
    header: &apos;&lt;h3 class=&quot;league-name&quot;&gt;NHL Teams&lt;/h3&gt;&apos;
  }
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h5 id="section9" class="tx-inverse mg-b-35">Scrollable Dropdown</h5>

        <div data-label="Example" class="df-example demo-forms">
          <div class="search-form search-suggestion-fixed wd-lg-50p">
            <input id="scrollDrop" type="search" class="form-control" placeholder="Countries">
          </div>
        </div><!-- df-example -->
        <pre><code class="language-js">$(&apos;#scrollDrop&apos;).typeahead(null, {
  name: &apos;countries&apos;,
  limit: 10,
  source: countries
});</code></pre>
 
<footer class="content-footer">
  <div>
    <span>&copy; 2019 Tangdao Design v1.0.0. </span>
    <span>Made by <a href="http://gitee.com/ruyangit">Ryan</a></span>
  </div>
  <div>
    <nav class="nav">
      <a href="#" class="nav-link">Licenses</a>
      <a href="../change-log.html" class="nav-link">Change Log</a>
      <a href="#" class="nav-link">Get Help</a>
    </nav>
  </div>
</footer><!-- content-footer -->

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Expanding Search Bar</a>
            <a href="#section3" class="nav-link">With Typeahead</a>
            <a href="#section4" class="nav-link">Bloodhound</a>
            <a href="#section5" class="nav-link">Prefetch</a>
            <a href="#section6" class="nav-link">Remote</a>
            <a href="#section7" class="nav-link">Custom Template</a>
            <a href="#section8" class="nav-link">Multiple Datasets</a>
            <a href="#section9" class="nav-link">Scrollable Dropdown</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../lib/feather-icons/feather.min.js"></script>
    <script src="../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="../lib/prismjs/prism.js"></script>

    <script src="../assets/js/tangdao.js"></script>
    <script src="../assets/js/tangdao.component.js"></script>

    <script>
      $(function(){
        'use strict'
 
       // Expand expanding search
       $('#searchExpanding button').on('click', function(e){
          e.preventDefault()

          if($(this).prev().val() === '') {
            $(this).parent().toggleClass('expand');
          } else {
            $(this).parent().submit();
          }
        })

        // Collapse expanding search
        $('#searchExpanding .form-control').on('focusout', function(e){
          if($(this).val() === '') {
            $(this).parent().removeClass('expand');
          }
        })

      });
    </script>
  </body>
</html>
